extends /layout

block declarations
    - additional_title      = lingua.settings;
    - body_class            = 'appSettings';
    - use_angular           = true;
    - angular_app           = "settingsApp";
    - angular_body_ctrl     = "settingsCtrl";
    - include_validation    = true;
    - include_remote        = true;

block additional_css
    link(rel='stylesheet', href='/settings/css/style.css')

block additional_scripts
    script(src="/core/js/plugins/angular/angular-ui/ui-bootstrap-tpls-0.11.0.js")
    script(src="/settings/js/app.js")
    script(src='/core/js/plugins/oauth.min.js')

block body
    header.settings
        .container
            .row
                a.backlink(href="/") &#xe113;
                h1  #{lingua.settings}
    .container-fluid
        .ui-widget(ng-if="message")
            .message
                .message {{message}}
        #settings
            input.oauthKeyHidden(name="oauthKey" type="hidden")
            form.form-horizontal#setup.validate-form(action='/submit',method='post')
                .configurable-options.col-sm-12.col-md-12.col-lg-9
                    h2 #{lingua.settings_configurable_options}
                    setting(icon="folder")
                        label(for="moviepath") #{lingua.setting_movielocation}
                        input#moviepath(name="moviepath", ng-model="config.moviepath", type="text",placeholder="#{lingua.settings_placeholder_path}")
                    setting(icon="folder")
                        label.col-md-2(for="musicpath") #{lingua.setting_musiclocation}
                        input#musicpath(name="musicpath", ng-model="config.musicpath", type="text",placeholder="#{lingua.settings_placeholder_path}")
                    setting(icon="folder")
                        label(for="tvpath") #{lingua.setting_tvlocation}
                        input#tvpath(name="tvpath", ng-model="config.tvpath", type="text", placeholder="#{lingua.settings_placeholder_path}")
                    setting(icon="flag")
                        label(for="language") #{lingua.setting_language}
                        select#language(name="language", ng-options="isoLangs[lang].nativeName for lang in availableLanguages track by lang", ng-model="config.language")
                    setting(icon="flag")
                        label(for="country") #{lingua.setting_country}
                        select#country(name="country", ng-options="code as name for (code, name) in countries", ng-model="config.country")
                    setting(icon="globe")
                        label(for="location") #{lingua.setting_location}
                        input#location(name="location", ng-model="config.location", type="text", placeholder="#{lingua.settings_placeholder_location}")
                    setting(icon="coffee")
                        label(for="screensaver") #{lingua.setting_screensaver}
                        select#screensaver(name="screensaver", ng-options="saver for saver in availableScreensavers track by saver", ng-model="config.screensaver")
                    setting(icon="signal")
                        label.col-md-2(for="quality") #{lingua.setting_transcoding_quality}
                        select#quality(name="quality", ng-options="quality for quality in availableQuality track by quality", ng-model="config.quality")
                    setting(icon="photo")
                        label(for="theme") #{lingua.setting_theme}
                        select#theme(name="theme", ng-options="theme for theme in themes track by theme", ng-model="config.theme")
                    setting(icon="time")
                        label(for="schedule") #{lingua.setting_data_gathering}
                        input#schedule(name="schedule", ng-model="config.schedule", type="text", placeholder="#{lingua.settings_placeholder_time_data_gathering}")
                    setting(icon="exchange")
                        label(for="port") #{lingua.setting_port}
                        input#port(name="port", ng-model="config.port", type="text", placeholder="#{lingua.settings_placeholder_port}")

                    div(ng-repeat="pluginSetting in pluginSettings")
                        .form-group.mcjs-rc-controllable(ng-repeat="field in pluginSetting")
                                label.col-md-2(for="{{field.name}}") {{field.label}}
                                .col-md-10.input-group
                                    span.input-group-addon
                                        i.icon.puzzle.piece
                                    div(create-control="{{field.type}},{{field.name}},{{field.placeholder}}")


                    .form-group.mcjs-rc-controllable
                        .col-md-offset-2.col-md-10
                            input.btn.mcjs-rc-clickable(type="submit",value="#{lingua.setting_submit}")
                            input.oauth(name="oauth" type="hidden")

                .cache-management.col-sm-12.col-md-12.col-lg-3
                    .col-xs-12.col-sm-6.col-md-6.col-lg-12
                        h2 #{lingua.settings_cache_management}
                        .form-group.mcjs-rc-controllable
                            a.btn.mcjs-rc-clickable(ng-click="clearCache('Movie')")
                                i.trash.icon
                                | #{lingua.settings_clear_cache_movies}
                        .form-group.mcjs-rc-controllable
                            a.btn.mcjs-rc-clickable(ng-click="clearCache('Album,Track,Artist')")
                                i.trash.icon
                                | #{lingua.settings_clear_cache_music}
                        .form-group.mcjs-rc-controllable
                            a.btn.mcjs-rc-clickable(ng-click="clearCache('Episode,Show')")
                                i.trash.icon
                                | #{lingua.settings_clear_cache_tv}
                        .form-group.mcjs-rc-controllable
                            a.btn.mcjs-rc-clickable(ng-click="clearCache('Device')")
                                i.trash.icon
                                | #{lingua.settings_clear_cache_device}
                    .col-xs-12.col-sm-6.col-md-6.col-lg-12
                        h2 #{lingua.settings_scraper_data}
                        .form-group.mcjs-rc-controllable
                            a.btn.scraperlink.mcjs-rc-clickable(ng-click="getScraperData('movies')")
                                i.cloud.download.icon
                                | #{lingua.settings_get_movie_metadata}
                        .form-group.mcjs-rc-controllable
                            a.btn.scraperlink.mcjs-rc-clickable(ng-click="getScraperData('music')")
                                i.cloud.download.icon
                                | #{lingua.settings_get_music_metadata}
                        .form-group.mcjs-rc-controllable
                            a.btn.scraperlink.mcjs-rc-clickable(ng-click="getScraperData('tv')")
                                i.cloud.download.icon
                                | #{lingua.settings_get_tv_metadata}
                        .form-group.mcjs-rc-controllable
                            a.btn.scraperlink.mcjs-rc-clickable(ng-click="getScraperData('all')")
                                i.cloud.download.icon
                                |#{lingua.settings_get_all_metadata}
                .access-table.col-sm-12.col-md-12.col-lg-12
                    h2 #{lingua.settings_access_management}
                    .form-group.mcjs-rc-controllable
                        strong #{lingua.settings_device_connected}:
                        table.table
                            thead
                                tr
                                    th #{lingua.settings_device_id}:
                                    th #{lingua.settings_device_seen}:
                                    th #{lingua.settings_device_allowed}:
                                    th #{lingua.settings_device_parental}:
                            tbody
                                tr.mcjs-rc-controllable(ng-repeat="device in devices")
                                    td.device {{device.deviceID}}
                                    td.seen {{device.lastSeen}}
                                    td.active(ng-if="device.isAllowed === 'yes'") #{lingua.setting_yes}
                                    td.active(ng-if="device.isAllowed === 'no'") #{lingua.setting_no}
                                    td
                                        a.parentalControl.btn.mcjs-rc-clickable.lock(ng-if="device.isAllowed === 'yes'", ng-click="setLocked(device, true)") #{lingua.settings_device_btn_lock}
                                        a.parentalControl.btn.mcjs-rc-clickable.unlock(ng-if="device.isAllowed === 'no'", ng-click="setLocked(device, false)") #{lingua.settings_device_btn_unlock}

    script(type="text/ng-template", id="clearCacheModal.html")
        .modal-body #{lingua.settings_confirm_message}
        .modal-footer
            button.btn.btn-primary(ng-click="$close('ok click')") #{lingua.ok}
            button.btn.btn-warning(ng-click="$dismiss('cancel click')") #{lingua.cancel}
